<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流优化</title>
    <style>
        .out{
            position: fixed;
            top: 0;left: 0;right: 0;bottom: 0;
            background: rgb(0,0,0);
        }
        .out .text{
            position: absolute;
            top: 50%;left: 50%;
            transform: translate(-50%,-50%);
            color: white;
            font-size: 100px;
            /*多重阴影*/
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="text">100*200</div>
    </div>
    <script>
        let text = document.querySelector('.text');

        /*设置时间优化*/
        var time = false;


        let resize = function () {
            if (time) return;

            var height = window.innerHeight;
            var width = window.innerWidth;

            text.innerHTML = width + 'x' + height;

            /*300毫秒后time将赋值null*/
            time = setTimeout(function () {
                time = null;
            },300)
        }

        window.addEventListener('resize',resize);
        /*初始化窗口大小*/
        resize();
    </script>
</body>
</html>